<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<!-- <script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script> -->
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<div id="root" >
	<p>{{msg}}</p>
</div>
<script>
	/**
	 * 你应该注意到 Vue.js 的计算属性不是简单的 getter。计算属性持续
	 * 追踪它的响应依赖。在计算一个计算属性时，Vue.js 更新它的依赖列
	 * 表并缓存结果，只有当其中一个依赖发生了变化，缓存的结果才无效。
	 * 因此，只要依赖不发生变化，访问计算属性会直接返回缓存的结果，
	 * 而不是调用 getter。
	 * 为什么要缓存呢？假设我们有一个高耗计算属性 A，它要遍历一个巨型
	 * 数组并做大量的计算。然后，可能有其它的计算属性依赖
	 *  A。如果没有缓存，我们将调用 A 的 getter 
	 *  许多次，超过必要次数。
	 */
var vm = new Vue({
		el : '#root',
		 data: {
		 	msg: 'hi'
		 },
	 methods: {
		 example: function () {
		 	console.log(Date.now() + this.msg) ;
		 }
	 }
})
vm.msg = 'nihaoa';
vm.example();
/**
 * 计算属性 example 只有一个依赖：vm.msg。Date.now() 不是 
 * 响应依赖，因为它跟 Vue 的数据观察系统无关。因而，在访问
 *  vm.example 时将发现时间戳不变，除非 vm.msg 变了。
 *  有时希望 getter 不改变原有的行为，每次访问 vm.example 时都调用 
 *  getter。这时可以为指定的计算属性
 */
/**
 * computed: {
	 example: {
	 cache: false,
	 get: function () {
	 return Date.now() + this.msg
	 }
	 }
	}
 */
</script>	
</body>
</html>